<%@ page import="photobox.account.User; photobox.photo.PhotoComment" %>
 <%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2014/10/16
  Time: 16:09
--%>
<g:render template="../home/header" ></g:render>

<script>
    $(function(){
        $('#laudNum').click(function(){
            if(!'${session.userId}'){
                sAlert('未登录！');
            }else{
                $.ajax({
                    type: "POST",
                    url: "<g:createLink controller="photo" action="updateLaud"/>",
                    data: {id:${photo?.id}},
                    dataType: "json",
                    success: function(data) {
                        console.dir(data);
                        if (data.status == 0) {
                            // alert(data.message);
                            var laudNum = data.laudNum;
                            //             $("#laudNum").val(parseInt($("#laudNum").val())+1);
                            $("#laudNum").val("已赞");
                            document.getElementById('support').innerHTML = laudNum;
                        }else{
                            //alert('您已经赞过此作品了');
                            $("#laudNum").val("已赞");
                        }

                    },
                    error: function (data, status, e)//服务器响应失败处理函数
                    {
                        sAlert('点赞失败！');
                    }
                });
            }

        });
        $('#comment').click(function () {
            var id = ${photo?.id};
            var value = $("#_comment").val();
            if(!'${session.userId}'){
                sAlert("请登录！");
            } else{
                if(!value){
                    sAlert('请填写评论内容');
                    return;
                }
                $.ajax({
                    type: "POST",
                    url: "<g:createLink controller="photo" action="createComment"/>",
                    data: {id:id, comment: value},
                    dataType: "json",
                    success: function (data) {
                        console.dir(data)
                        $("#commentDiv").after("<div class='zp_plList'><div class='zp_userface f_l'><img src='../../"+data.photoImage+"' alt='' width='70' height='70' style='border-radius:50%;' /></div><div class='blk_l1 f_l'><div class='zp_info'><span class='zp_username'><em>"+data.commentPerson+"</em></span><span class='zp_usertime'>"+data.commentDate+"</span></div>"+"<div class='zp_plCon'>"+data.photoComment+"</div></div></div>");
                        $("#_comment").val("");
                        $("#noComment").html("");
                    },
                    error: function (data, status, e)//服务器响应失败处理函数
                    {
                        sAlert('评论失败！');
                    }
                });
            }
        });

        $('#buyButton').click(function(){
            if(!'${session.userId}'){
                /*alert("请登录！");*/
               sAlert("您还没有登录，请登录！");
            //$('<div  id="alert">请登录!!!!!!!!请登录!！</div>');

            }else{
                window.location.href="/photobox/order/buy?id=${photo?.id}"
            }
        });

    });

    window._bd_share_config = {
        common : {
            bdText : "PhotoBox-${photo.name},作者：${photo.user.username}",
            bdDesc : '来自PhotoBox网的分享，作品名称：“${photo.name}”,作者：“${photo.user.username}”',
            bdUrl : "${domain_name}photo/show/${photo.id}",
            bdPic : '自定义分享图片'
        },
        share : [{
            "bdSize" : 24
        }],
        slide : [{
            bdImg : 0,
            bdPos : "right",
            bdTop : 100
        }],
        image : [{
            viewType : 'list',
            viewPos : 'top',
            viewColor : 'black',
            viewSize : '16',
            viewList : ['qzone','tsina','huaban','tqq','renren']
        }],
        selectShare : [{
            "bdselectMiniList" : ['qzone','tqq','kaixin001','bdxc','tqf']
        }]
    }
    with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];

</script>
<div class="load_blk1 load_blk_ying load1 upload1">
    %{--作品信息--}%
    <div class="blk3_2">
        <div class="zp_xxzp1 f_l">
            <h3 class="zp_h3">${photo.name}</h3>
            <p class="p1" style="color: #b8b8b8">
                <g:if test="${theme != []}">作品主题：
                    <g:each status="i" var="item" in="${theme}"><g:link controller="photo" action="categoryDetail" class="mRi_10" params="[id:item.id]" >[${item.name}]</g:link></g:each>
                </g:if>
                <g:if test="${style != []}">作品风格：
                    <g:each status="i" var="item" in="${style}"><g:link controller="photo" action="categoryDetail" class="mRi_10" params="[id:item.id]" >[${item.name}]</g:link></g:each>
                </g:if>
            </p>
        </div>

        <div class="zp_xxzz f_r">
            <div class="lude_content" style="height: 103px; border: 0;">
              <g:link controller="home" action="bestPhotographer" params="['userId':photo.user.id]" style="height: 103px; width:330px;">

                <div class="zp_userface f_l" style="width: 70px; height: 70px; margin: 15px 0 0 0;">
                    <g:if test="${photo.user.photoImage}">
                        <img src="${domain_name}${photo.user.photoImage}" alt="" width="70" height="70" style="border-radius:50%;" />
                    </g:if>
                    <g:else>
                        <img src="${resource(dir: '/assets/img', file: 'headp_140.jpg')}" alt="" width="70" height="70" style="border-radius:50%;">
                    </g:else>
                </div>
                <div class="lude_gongsi f_l" style="width: 200px; height: 60px; margin: 25px 0 0 10px;">
                    <h4>作者：${photo?.user.nickName}</h4>
                    <p>作品数量：${photoNum}</p>
                </div>
              </g:link>
            </div>
        </div>
    </div>
    <div class="heng_line clear"></div>
    %{--/作品信息--}%

    <div class="pic_blk1">
        <img src="../../${photo?.bigImagePath}" border="0" class="img" />
    </div>
    <div class="pic_blk1 mBo_20 mTo_10">
        <span class="span1">使用设备：${photo?.device}</span>
        <span class="span1" id="time">拍摄日期：${photo?.picTime.format("yyyy-MM-dd")}</span>
        %{--<span class="span1" id="time1">上传时间：${photo?.dateCreated.format("yyyy-MM-dd HH:mm:ss")}</span>

        <p class="p1">作品尺寸：
        <g:each in="${photo?.photoSize}">
            ${it.width}*${it.height}
        </g:each>
        </p>--}%
    </div>
    <div class="pic_blk1">
        <p>${photo?.description}</p>
    </div>

%{--赞、分享--}%
    <div class="zp_xx1">
            <div class="zp_btnqu1">
                <g:if test="${userBrowse?.laud == 0}">
                    <span><cite class="tubiao5 tubiao5_1"></cite> <input type="button" id="laudNum"  value="赞"><cite  id="support">${photo?.laudNum}</cite></span>
                </g:if>
                <g:elseif test="${userBrowse == null}">
                    <span><cite class="tubiao5 tubiao5_1"></cite> <input type="button" id="laudNum"  value="赞"><cite  id="support">${photo?.laudNum}</cite></span>
                </g:elseif>
                <g:else>
                    <span><cite class="tubiao5 tubiao5_1"></cite> <input type="button" id="laudNum"  value="已赞"><cite  id="support">${photo?.laudNum}</cite></span>
                </g:else>
                <span style="border-left: 1px solid #c7dcac;border-right: 1px solid #c7dcac;"><!--<cite class="tubiao5 tubiao5_2"></cite> <input type="button" value="分享" onclick="appear()">%{--${photo?.shareNum}--}%-->
                    <ul class="bdsharebuttonbox" data-tag="share_1">
                        <li><a class="bds_mshare" data-cmd="mshare"></a></li>
                        <li><a class="bds_qzone" data-cmd="qzone" href="#"></a></li>
                        <li><a class="bds_tsina" data-cmd="tsina"></a></li>
                        <li><a class="bds_baidu" data-cmd="baidu"></a></li>
                        <li><a class="bds_renren" data-cmd="renren"></a></li>
                        <li><a class="bds_tqq" data-cmd="tqq"></a></li>
                        <li><a class="bds_more" data-cmd="more">更多</a></li>
                        <li><a class="bds_count" data-cmd="count"></a></li>
                    </ul>
                </span>
                <span class=""><cite class="tubiao5 tubiao5_3"></cite> <input type="button" id="buyButton" value="购买" >${photo?.saleNum}</span>

            </div>
        <div class="zp_biao1"></div><div class="zp_biao2"></div>
    </div>
%{--/赞、分享--}%
    <div class="zp_blk_qu"  style="overflow: hidden;">
        %{--信息评论--}%
        <div class="zp_blk_L f_l bor1" >
           %{--<g:if test="${session.userId}">--}%
                <div class="zp_pl" id="commentDiv">
                    <div class="zp_userface f_l">
                        <g:if test="${photobox.account.User.get(session.userId)?.photoImage}">
                            <img src="${domain_name}${photobox.account.User.get(session.userId)?.photoImage}" alt="" width="70" height="70" style="border-radius:50%;" />
                        </g:if>
                        <g:else>
                            <img src="${resource(dir: '/assets/img', file: 'headp_140.jpg')}" alt="" width="70" height="70" style="border-radius:50%;">
                        </g:else>
                    </div>
                    %{--评论:--}%<div class="plk f_r"><g:textArea name="comment"  id="_comment" rows="5" cols="80" ></g:textArea>
                    <div class="biao2"></div>
                    </div>
                    <div class="clear" style="width:100%; height: 30px; text-align: right; padding-top: 20px; position: relative;">
                        <span class="fb_bioa">&nbsp;</span>
                        <input type="button" id="comment" value="发表" class="annui1"style="width:53px; height: 26px; color: #fff;">
                    </div>
                </div>
               <div class="heng_line clear"></div>
           %{--</g:if>--}%
    <div class="zp_plListqu">
        <g:if test="${photoComment == []}">
            <div class="zp_plCon Ptb_20" style="text-indent: 20px;" id="noComment">该作品还没有人评价</div>
        </g:if>
        <g:else>
            <g:each in="${photoComment}">
                <div class="zp_plList">
                    <div class="zp_userface f_l">
                        <g:if test="${it.user.photoImage}">
                            <img src="${domain_name}${it.user.photoImage}" alt="" width="70" height="70" style="border-radius:50%;" />
                        </g:if>
                        <g:else>
                            <img src="${resource(dir: '/assets/img', file: 'headp_140.jpg')}" alt="" width="70" height="70" style="border-radius:50%;">
                        </g:else>
                    </div>
                    <div class="blk_l1 f_l">
                        <div class="zp_info"><span class="zp_username">
                            <em>${it.user.nickName}</em></span><span class="zp_usertime">${it.dateCreated.format("yyyy-MM-dd HH:mm:ss")}</span>
                        </div>
                        <div class="zp_plCon">${it.comment}</div>
                    </div>
                </div>
            </g:each>
        </g:else>
    </div>
        </div>
        %{--/信息评论--}%

        %{--右边列表--}%
        <div class="blk_r1 f_r">
            <div class="blk_r1 bor1" style="border-top: none;">
                <div class="s_title">
                    <div class="line-g"></div>
                    <div class="s_titNa">
                        <div class="s_tit_p"><span class=" tubiao3 tubiao3_7">&nbsp;</span>More works</div>
                        <h3 class="">更多该作者作品</h3>
                    </div>
                </div>
                <div class="blk_r1con">
                    <g:each in="${photoOwner?}" status="i" var="it">
                        <div class="lude_content ${(i%2==0) ? 'bg_f2' : ''}">
                            <li>
                                <g:link controller="photo" action="show" params="[id:it?.id]">
                                    <div class="lude_gongtu f_l ${(it.showShape == 2) ? 'pic_cent' : ''}"><div><img src="../../${it.smallImagePath}" border="0" ></div></div>
                                    <div class="lude_gongsi f_l">
                                        <h4>${it.name}</h4>
                                        <p>作者：${it.user?.username}</p>
                                        <!--<p class="lig_orange">￥${Math.round(it.price)}</p>-->
                                    </div>
                                </g:link>
                            </li>
                        </div>
                    </g:each>
                    <div class="s1_mone" style="display: none">
                        <g:link controller="photo" action="listDetails"><span class="none">更多&gt;&gt;</span></g:link>
                    </div>
                </div>
            </div>

            <div class="blk_r1 bor1">
                <div class="s_title">
                    <div class="line-g"></div>
                    <div class="s_titNa">
                        <div class="s_tit_p"><span class=" tubiao3 tubiao3_8">&nbsp;</span>Similar works</div>
                        <h3 class="">其他相似作品</h3>
                    </div>
                </div>
                <div class="blk_r1con">
                    <g:each in="${similarPhotos?}" status="i" var="it">
                        <div class="lude_content ${(i%2==0) ? 'bg_f2' : ''}">
                            <li>
                                <g:link controller="photo" action="show" params="[id:it?.id]">
                                    <div class="lude_gongtu f_l ${(it.showShape == 2) ? 'pic_cent' : ''}"><div><img src="../../${it.smallImagePath}" border="0" ></div></div>
                                    <div class="lude_gongsi f_l">
                                        <h4>${it.name}</h4>
                                        <p>作者：${it.user?.username}</p>
                                        <!--<p class="lig_orange">￥${Math.round(it.price)}</p>-->
                                    </div>
                                </g:link>
                            </li>
                        </div>
                    </g:each>
                    <div class="s1_mone" style="display: none">
                        <g:link controller="photo" action="listDetails"><span class="none">更多&gt;&gt;</span></g:link>
                    </div>
                </div>
            </div>

        </div>
        %{--/右边列表--}%
    </div>
</div>

%{--页尾--}%
<div class="foot_d">
    <div class=""><p>Copyright @ 2015 图藏文化 99tucang.com</p></div>
</div>
%{--/页尾--}%

%{--上传作品--}%
<script>
    /*上传作品*/
    $(document).ready(function(){

        $('<a href="#" id="retop"><div class="triangle1"></div><div class="triangle2"></div></a>').appendTo('body').fadeOut().click(function(){
            $(document).scrollTop(0);
            $(this).fadeOut();
            return false
        });
        var $retop = $('#retop');
        function backTopLeft(){
            var btLeft = $(window).width() / 2 + 610;
            if (btLeft <= 1000) {
                $retop.css({ 'left': 1000 })
            } else {
                $retop.css({ 'left': btLeft })
            }
        }
        backTopLeft();

        var towGO= function () {
            backTopLeft();
        }
        $(window).resize(towGO);
        $(window).scroll(function(){
            if ($(document).scrollTop() === 0) {
                $retop.fadeOut()
            } else {
                $retop.fadeIn()
            }
            var btLeft =(app.indexOf('Microsoft') != -1) ? $(document).width() / 2 + 446-window.scrollX : $(document).width() / 2 + 458-window.scrollX;
            $popul.css({ 'left': btLeft })
            if ($.browser.msie && $.browser.version == 6.0 && $(document).scrollTop() !== 0){
                $popul.css({ 'opacity': 1 })
            }
        });
    });
</script>
%{--/上传作品--}%

%{--登录弹出框--}%
<div id="LoginBox">
    <div class="loginqu1">
        登录<a href="javascript:void(0)" title="关闭窗口" class="close_btn" id="closeBtn">×</a>
    </div>
    <div class="loginqu">
        <label>用户名/邮箱:</label> <span class="inputBox">
        <input type="text" id="txtName" placeholder="账号/邮箱" />
    </span><a href="javascript:void(0)" title="提示" class="warning" id="warn">*</a>
    </div>
    <div class="kong_20"></div>
    <div class="loginqu">
        <label>密&nbsp;&nbsp;&nbsp;&nbsp;码:</label>
        <span class="inputBox"><input type="password" id="txtPwd" placeholder="密码" /></span>
        <a href="javascript:void(0)" title="提示" class="warning" id="warn2">*</a>
    </div>
    <div class="kong_5"></div>
    <div class="loginqu" style="height: 20px;">
        <label style="height: 20px;">&nbsp;</label>
        <span class="inputBox" id="message"style="color:red; font-size: 14px; line-height: 20px; border: none; "></span>
    </div>
    <div class="kong_5"></div>
    <div class="loginqu mBo_10">
        <label><input type="checkbox" value="下次自动登录" class="fu_btn" width="20" height="20"/></label> <span class="fu_con">下次自动登录</span>
    </div>
    <div class="loginqu">
        <a href="#" id="loginbtn">登录</a>
        <a href="${createLink(controller: 'member',action: 'forgetPwd')}" id="forgetPwd">忘记密码？</a>
    </div>
</div>
<script type="text/javascript" src="${resource(dir:'/photobox',file:'pop_login.js')}"></script>

<script>
    $("#loginbtn").on('click', function () {

        var txtName = $("#txtName").val();
        var txtPwd = $("#txtPwd").val();
        if (txtName == "" || txtName == undefined || txtName == null) {
            if (txtPwd == "" || txtPwd == undefined || txtPwd == null) {
                $(".warning").css({ display: 'block' });
            }
            else {
                $("#warn").css({ display: 'block' });
                $("#warn2").css({ display: 'none' });
            }
        }
        else {
            if (txtPwd == "" || txtPwd == undefined || txtPwd == null) {
                $("#warn").css({ display: 'none' });
                $(".warn2").css({ display: 'block' });
            }
            else {
                $(".warning").css({ display: 'none' });
            }
        }
        $.ajax({
            url: "${domain_name}member/login", //用于登录验证的服务器端请求地址
            type: 'POST',
            data:{username:txtName, password:txtPwd},
            dataType: 'json',
            timeout: 1000,
            error: function(){
                $("#message").html('登录失败');
            },
            success: function(result){
                if(result.message!=null){
                    $("#message").html(result.message);
                }
                if(result.status==1){
                    $("#message").html("");
                    $("#loginbtn").html("登录中");
                    window.location.reload()
                }
            }

        });
    });

    $(function(){
        $('#_popul').click(function(){
            if(!'${session.userId}'){
                sAlert("您还没有登录，请登录！");
                $(document).scrollTop(0);
                //$(this).fadeOut();
            }else if('${session.isiPhotographer}'=="0"){
                sAlert("对不起，你目前还不是摄影师或者您的申请还未通过审核，暂时不能使用“发表作品”功能");
            }else{
                window.location.href="/photobox/photo/add"
            }
        });
    });
</script>
%{--/登录弹出框--}%
</body>

</html>

